<template>
  <div>
    <loading :state="loading"></loading>
    <popup :pupData="pupData" @sureFun="sureFun" @cancelFun="cancelFun" ref="popupref">
      <slot name="sure" @click="deleteGoods"></slot>
    </popup>
    <div class="cell">
      <p>订单金额</p>
      <p class="price">{{price}}</p>
    </div>
    <div class="cell">
      <p>{{consigneeStyle}}</p>
      <p>{{consigneeName}}</p>
    </div>
    <div class="cell" v-for="(item,key) in payStyle" :key="key"  @click="chooseStyle(item)">
      <div class="sty">
        <svg aria-hidden="true" class="wx">
          <use xlink:href="#icon-gwc_zfvx1"></use>
        </svg>
        <div>{{item.name}}</div>
      </div>
      <svg aria-hidden="true" class="choose" :class="item.state?'tru':'fal'">
        <use xlink:href="#icon-gwc_xz"></use>
      </svg>
    </div>
    <div class="des">温馨提示：<br>
      支付完成后将会生成您的专属二维码，<br>
      请勿关闭当前页面。</div>
    <div class="out">
      <div class="btn-reverse" @click="toPay">确认支付</div>
    </div>
  </div>
</template>

<script>
  import cell from '@/components/common/Cell';
  import { Toast } from 'vant';
  export default {
    components: {
      cell
    },
    data() {
      return {
        payStyle: [],
        consigneeName: '',
        consigneeStyle: '',
        price: '',
        loading: true,
        data: {},
        wx: {},
        pupData: {
          des: '您未设置支付密码，请先设置',
          cancel: '取消',
          sure: '设置'
        }
      };
    },
    computed: {
      selectStyle() {
        let style = '';
        this.payStyle.forEach(function (obj) {
          if (obj.state === true) {
            style = obj.way;
          }
        });
        return style;
      }
    },
    methods: {
      chooseStyle(data) {
        this.payStyle.forEach(function (obj) {
          obj.state = false;
        });
        data.state = !data.state;
      },
      sureFun() {
        // str位子组件串来的参数
        this.$refs.popupref.switchState();
        this.$router.push('verification');
      },
      // 删除弹出框取消
      cancelFun() {
        this.$refs.popupref.switchState();
      },
      toPay() {
        this.data.way = this.selectStyle;
//        this.data.money = this.price;
        let pay;
        for (let i = 0; i < this.payStyle.length; i++) {
          if (this.payStyle[i].state === true) {
            pay = 1;
            break;
          } else {
            pay = 0;
          }
        }
        if (pay === 1) {
          this.$Sale.payCreate(this.data).then(res => {
            this.wx.id = res.data.id;
            this.wx.money = this.price;
//            if (this.selectStyle === 'alipay') {
//              this.$router.push({
//                name: 'alipay',
//                query: {id: res.id}
//              });
//            } else if (this.selectStyle === 'wx') {
              this.$router.push({
                name: 'pay-tips',
                query: this.wx
              });
//            } else if (this.selectStyle === 'integral') {
//              this.$router.push({
//                name: 'integralPay',
//                query: this.wx
//              });
//            }
          });
          // this.$refs.popupref.switchState();
        } else {
          Toast('请选择支付方式');
        }
      }
    },
    watch: {
      // 监听具体数据变化，并做相应的处理
    },
    beforeCreate() {
      // 可以在这加个loading事件，在加载实例时触发
      // 这个阶段实例的data、methods是读不到的
    },
    created() {
      // 初始化数据，如在这结束loading事件，异步ajax请求也适宜在这里调用
      // 实例创建后：这个阶段已经完成了数据观测(data observer)，属性和方法的运算， watch/event 事件回调。
      // mount挂载阶段还没开始，"el" 属性目前不可见，数据并没有在DOM元素上进行渲染
    },
    beforeMount() {
      // 相关的 render 函数首次被调用。
    },
    mounted() {
      let data = this.$route.query;
      this.$Sale.pay(data).then(res => {
        let styles = [];
        for (let i in res.data) {
          res.data[i].state = false;
          styles.push(res.data[i]);
        }
        this.payStyle = styles;
        this.price = data.money;
        this.consigneeStyle = data.consigneeStyle;
        this.consigneeName = data.consigneeName;
        this.data.targetType = data.targetType;
        this.data.targetId = data.targetId;
        this.loading = false;
      }, () => {
        this.loading = false;
      });
      // 挂载元素，获取到DOM节点
      // el选项的DOM节点 被新创建的 vm的el 替换，并挂载到实例上去之后调用此生命周期函数。此时实例的数据在DOM节点上进行渲染
    },
    beforeUpdate() {
      // 数据更新时调用，但不进行DOM重新渲染，在数据更新时DOM没渲染前可以在这个生命函数里进行状态处理
    },
    updated() {
      //  如果对数据统一处理，在这里写上相应函数
      // 这个状态下数据更新并且DOM重新渲染，当这个生命周期函数被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。当实例每次进行数据更新时updated都会执行
    },
    beforeDestroy() {
      // 可以做一个确认停止事件的确认框
    },
    destroyed() {
      // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁
    }
  };

</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "../../assets/stylus/main.styl"
  .cell
    display flex
    align-items center
    background-color #fff
    height vw(45)
    padding 0 vw(10)
    border-radius vw(5)
    justify-content space-between
    margin vw(5) vw(15)
    color #333
    font-size vw(16)
    .price
      color main-color
    p:last-child
      font-size word16
    .sty
      display flex
      align-items center
    .wx
      width vw(26)
      height vw(26)
      margin-right vw(10)
    .choose
      width vw(20)
      height vw(20)
    .tru
      fill main-color
    .fal
      fill #666
  .des
    color #999
    font-size vw(12)
    text-align center
    line-height 2
    margin-top vw(20)
  .out
    out()
    .btn-reverse
      btn-primary()
</style>
